import React from 'react';
import { Box, Typography, Paper, Grid } from '@mui/material';

const Dashboard = () => {
  // 示例数据，实际应用中应从API获取
  const dashboardStats = {
    totalComponents: 10,
    activeGrayReleases: 3,
    totalUsers: 1000,
    recentUpdates: 5
  };
  
  return (
    <Box sx={{ p: 4 }}>
      <Typography variant="h4" component="h1" gutterBottom>
        仪表盘
      </Typography>
      
      <Grid container spacing={3}>
        <Grid item xs={12} sm={6} md={3}>
          <Paper sx={{ p: 3, textAlign: 'center' }}>
            <Typography variant="h6" color="textSecondary">组件总数</Typography>
            <Typography variant="h4" sx={{ mt: 2 }}>{dashboardStats.totalComponents}</Typography>
          </Paper>
        </Grid>
        
        <Grid item xs={12} sm={6} md={3}>
          <Paper sx={{ p: 3, textAlign: 'center' }}>
            <Typography variant="h6" color="textSecondary">活跃灰度发布</Typography>
            <Typography variant="h4" sx={{ mt: 2 }}>{dashboardStats.activeGrayReleases}</Typography>
          </Paper>
        </Grid>
        
        <Grid item xs={12} sm={6} md={3}>
          <Paper sx={{ p: 3, textAlign: 'center' }}>
            <Typography variant="h6" color="textSecondary">总用户数</Typography>
            <Typography variant="h4" sx={{ mt: 2 }}>{dashboardStats.totalUsers}</Typography>
          </Paper>
        </Grid>
        
        <Grid item xs={12} sm={6} md={3}>
          <Paper sx={{ p: 3, textAlign: 'center' }}>
            <Typography variant="h6" color="textSecondary">最近更新</Typography>
            <Typography variant="h4" sx={{ mt: 2 }}>{dashboardStats.recentUpdates}</Typography>
          </Paper>
        </Grid>
      </Grid>
    </Box>
  );
};

export default Dashboard;